<template>
	<view class="container">
		<!-- Loading 状态 -->
		<view class="loading-wrapper" v-if="pageLoading">
			<uni-load-more status="loading" :content-text="loadingText"></uni-load-more>
		</view>
		
		<!-- 帖子内容 -->
		<view class="post-detail" v-else>
			<!-- 用户信息 -->
			<view class="user-info">
				<image class="avatar" :src="api.BASE_URL + post.user?.avatar" mode="aspectFill"></image>
				<view class="user-meta">
					<text class="username">{{ post.user?.username }}</text>
					<text class="time">{{ formatTime(post.create_time) }}</text>
				</view>
				
				<!-- 添加展开菜单 -->
				<view class="more-actions">
					<view class="more-btn" @tap="toggleMoreActions">
						<uni-icons type="more-filled" size="24" color="#666"></uni-icons>
					</view>
					
					<!-- 展开的菜单 -->
					<view class="action-menu" v-if="showMoreActions">
						<!-- 作者才能看到的操作 -->
						<template v-if="isAuthor">
							<view class="menu-item" @tap="goToEditPost">
								<text class="iconfont icon-edit"></text>
								<text>编辑</text>
							</view>
							<view class="menu-item" @tap="goToAddMedia">
								<uni-icons type="plusempty" size="16" color="#666"></uni-icons>
								<text>添加媒体</text>
							</view>
							<view class="menu-item" @tap="goToEditPostOrder">
								<text class="iconfont icon-edit"></text>
								<text>编辑顺序</text>
							</view>
							<view class="menu-item delete" @tap="handleDelete">
								<uni-icons type="trash" size="16" color="#ff6b6b"></uni-icons>
								<text>删除帖子</text>
							</view>
						</template>
						<!-- 所有人都能看到的操作 -->
						<view class="menu-item" @tap="refreshPage">
							<uni-icons type="refresh" size="16" color="#666"></uni-icons>
							<text>刷新</text>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 帖子内容 -->
			<view class="content-wrap">
				<text class="title">{{ post.title }}</text>
				<text class="content">{{ post.content }}</text>
				<!-- 媒体资源展示 -->
				<view class="media-list" v-if="medias.length > 0 || post.cover">
					<!-- 视频列表 -->
					<template v-for="media in videoMedias" :key="media.id">
						<video 
							class="media-video"
							:src="api.BASE_URL + media.media_url"
							controls
						></video>
					</template>
					
					<!-- 图片轮播 -->
					<view class="image-swiper-container" v-if="imageMedias.length > 0 || post.cover">
						<!-- 图片计数 -->
						<view class="image-counter">
							<text>{{ currentImageIndex + 1 }}/{{ totalImages }}</text>
						</view>
						
						<swiper 
							class="image-swiper"
							:indicator-dots="false"
							:autoplay="false"
							:duration="300"
							:circular="true"
							@change="handleSwiperChange"
						>
							<!-- 封面图放在第一个 -->
							<swiper-item 
								v-if="post.cover"
								class="swiper-item"
								@tap="previewImage(post.cover, true)"
							>
								<image 
									class="media-image"
									:src="api.BASE_URL + post.cover"
									mode="aspectFill"
								></image>
							</swiper-item>
							<!-- 其他图片按order排序展示 -->
							<swiper-item 
								v-for="media in imageMedias" 
								:key="media.id"
								class="swiper-item"
								@tap="previewImage(media.media_url)"
							>
								<image 
									class="media-image"
									:src="api.BASE_URL + media.media_url"
									mode="aspectFill"
								></image>
							</swiper-item>
						</swiper>
						
						<!-- 自定义指示点 -->
						<view class="custom-indicators">
							<!-- 当图片数量小于等于5张时显示所有点 -->
							<view 
								class="indicator-dot"
								v-if="totalImages <= 5"
								v-for="index in totalImages"
								:key="index"
								:class="{ active: currentImageIndex === index - 1 }"
							></view>
							
							<!-- 当图片数量大于5张时显示部分点 -->
							<template v-else>
								<!-- 前2个点 -->
								<view 
									class="indicator-dot"
									v-for="index in 2"
									:key="index"
									:class="{ active: currentImageIndex === index - 1 }"
								></view>
								
								<!-- 中间的省略号 -->
								<view class="indicator-more">
									<text>...</text>
								</view>
								
								<!-- 当前点及其前后点 -->
								<template v-if="currentImageIndex > 1 && currentImageIndex < totalImages - 2">
									<view 
										class="indicator-dot"
										:class="{ active: true }"
									></view>
								</template>
								
								<!-- 如果不是最后几个,显示省略号 -->
								<view 
									class="indicator-more"
									v-if="currentImageIndex < totalImages - 3"
								>
									<text>...</text>
								</view>
								
								<!-- 最后2个点 -->
								<view 
									class="indicator-dot"
									v-for="index in 2"
									:key="`last-${index}`"
									:class="{ active: currentImageIndex === totalImages - (3 - index) }"
								></view>
							</template>
						</view>
					</view>
				</view>
			</view>
			
			<!-- 评论区域 -->
			<view class="comment-section">
				<!-- 评论输入框 -->
				<view class="comment-input">
					<input 
						type="text"
						v-model="commentContent"
						placeholder="说点什么..."
						:disabled="loading"
						@confirm="submitComment"
					/>
					<button 
						class="submit-btn"
						:disabled="!commentContent.trim() || loading"
						@tap="submitComment"
					>
						发送
					</button>
				</view>
				
				<view class="comment-header">
					<text class="title">评论</text>
					<text class="count">({{ totalComments }})</text>
				</view>
				
				<!-- 评论列表 -->
				<view class="comment-list" v-if="comments?.length > 0">
					<view 
						class="comment-item" 
						v-for="comment in comments" 
						:key="comment.id"
					>
						<!-- 用户信息 -->
						<view class="comment-user">
							<image 
								class="avatar" 
								:src="api.BASE_URL + comment.user.avatar" 
								mode="aspectFill"
							></image>
							<view class="user-info">
								<text class="username">{{ comment.user.username }}</text>
								<text class="time">{{ formatTime(comment.create_time) }}</text>
							</view>
						</view>
						<!-- 评论内容 -->
						<view class="comment-info">
							<text class="content">{{ comment.content }}</text>
						</view>
					</view>
				</view>
				
				<!-- 无评论提示 -->
				<view class="no-comment" v-else>
					<text>暂无评论</text>
				</view>
				
				<!-- 分页控制 -->
				<view 
					class="pagination"
					v-if="totalPages > 1"
				>
					<view 
						class="page-btn prev" 
						:class="{ disabled: currentPage === 1 }"
						@tap="prevPage"
					>
						上一页
					</view>
					<view class="page-info">
						{{ currentPage }}/{{ totalPages }}
					</view>
					<view 
						class="page-btn next"
						:class="{ disabled: currentPage === totalPages }"
						@tap="nextPage"
					>
						下一页
					</view>
				</view>
			</view>
			
			<!-- 底部信息 -->
			<view class="post-footer">
				<view class="category-tag">{{ post.category?.name }}</view>
				<view class="action-btns">
					<view 
						class="action-item"
						:class="{ active: post.is_liked }"
						@tap="handleLike"
					>
						<text class="iconfont icon-icon"></text>
						<text>{{ post.likes }}</text>
					</view>
					<!-- 删除按钮 -->
					<view 
						class="delete-btn"
						v-if="isAuthor"
						@tap="handleDelete"
					>
						<uni-icons type="trash" size="20" color="#ff6b6b"></uni-icons>
						<text>删除</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 删除确认弹窗 -->
		<message-box
			ref="messageBox"
			title="删除帖子"
			message="确定要删除这篇帖子吗？删除后将无法恢复"
			cancelText="取消"
			confirmText="删除"
			confirmColor="#ff6b6b"
			@confirm="confirmDelete"
		/>
	</view>
</template>

<script setup>
import { ref, onMounted, computed } from 'vue'
import { api } from '@/utils/request'
import Storages from '@/utils/storages'
import MessageBox from '@/components/MessageBox.vue'
import { onLoad } from '@dcloudio/uni-app'
const postId = ref('')
const postDetail = ref(null)

// 添加页面加载状态
const pageLoading = ref(true)
const loadingText = {
	contentdown: '上拉显示更多',
	contentrefresh: '加载中...',
	contentnomore: '没有更多数据了'
}

// 修改 onLoad 方法
onLoad((options) => {
	if (!options.post_id) {
		uni.navigateBack({
			delta: 1
		});
		return;
	}
	postId.value = options.post_id
	
	// 延迟2秒后初始化数据
	setTimeout(async () => {
		try {
			await Promise.all([
				getPostDetail(),
				getPostMedia(postId.value),
				getComments(postId.value)
			])
			getUserInfo()
		} catch(err) {
			console.error('初始化数据失败', err)
			uni.showToast({
				title: '加载失败',
				icon: 'none'
			})
		} finally {
			pageLoading.value = false
		}
	}, 2000)
})

// 帖子数据
const post = ref({})

// 媒体资源列表
const medias = ref([])

// 计算视频和图片媒体
const videoMedias = computed(() => {
	return medias.value.filter(media => media.media_type === '视频')
})

const imageMedias = computed(() => {
	return medias.value
		.filter(media => media.media_type === '图片')
		.sort((a, b) => a.order - b.order) // 按order升序排序
})

// 评论相关
const comments = ref([])
const currentPage = ref(1)
const totalComments = ref(0)
const totalPages = ref(0)
const PAGE_SIZE = 5 // 每页显示5条评论
const loading = ref(false)

// 评论输入内容
const commentContent = ref('')

// 判断是否是作者
const isAuthor = computed(() => {
	return post.value?.user?.user_id === userInfo.value?.user_id
})

// 获取用户信息
const userInfo = ref({})

// 消息弹窗
const messageBox = ref(null)

// 当前图片索引
const currentImageIndex = ref(0)

// 计算总图片数
const totalImages = computed(() => {
	return (post.value.cover ? 1 : 0) + imageMedias.value.length
})

// 处理轮播切换
const handleSwiperChange = (e) => {
	currentImageIndex.value = e.detail.current
}

// 获取帖子详情
const getPostDetail = async () => {
	try {
		// 直接使用 postId.value，因为已经在 onLoad 中赋值
		if (!postId.value) {
			uni.showToast({
				title: '参数错误',
				icon: 'none'
			})
			setTimeout(() => {
				uni.navigateBack()
			}, 1500)
			return
		}
		
		const res = await api.request({
			url: '/api/post/get_post_detail/',
			method: 'GET',
			data: {
				post_id: postId.value
			}
		})
		
		if (res.code === 200) {
			post.value = res.data
			// 获取点赞状态
			checkLikeStatus(postId.value)
		}
	} catch (err) {
		console.error('获取帖子详情失败', err)
		uni.showToast({
			title: '获取帖子详情失败',
			icon: 'none'
		})
	}
}

// 检查点赞状态
const checkLikeStatus = async (postId) => {
	try {
		const res = await api.request({
			url: '/api/post/check_post_like/',
			method: 'GET',
			data: {
				post_id: postId
			}
		})
		if(res.code === 200) {
			// 更新帖子的点赞状态
			post.value.is_liked = res.data
		}
	} catch(err) {
		console.error('获取点赞状态失败', err)
	}
}

// 获取帖子媒体资源
const getPostMedia = async (postId) => {
	try {
		const res = await api.request({
			url: '/api/post/get_post_media/',
			method: 'GET',
			data: {
				post_id: postId
			}
		})
		
		if(res.code === 200) {
			// 直接赋值,不需要额外处理,因为已经在computed中处理排序
			medias.value = res.data
		}
	} catch(err) {
		console.error('获取媒体资源失败', err)
	}
}

// 预览图片
const previewImage = (url, isCover = false) => {
	// 构建预览图片数组,保持顺序
	const previewUrls = []
	
	// 如果有封面且当前是封面,把封面放在第一个
	if(post.value.cover) {
		previewUrls.push(api.BASE_URL + post.value.cover)
	}
	
	// 添加其他图片,保持排序
	imageMedias.value.forEach(media => {
		previewUrls.push(api.BASE_URL + media.media_url)
	})
	
	// 预览图片
	uni.previewImage({
		urls: previewUrls,
		// 如果是封面,从第一张开始预览,否则找到当前图片的索引
		current: isCover ? 0 : previewUrls.findIndex(item => item === api.BASE_URL + url)
	})
}

// 格式化时间
const formatTime = (timeStr) => {
	if(!timeStr) return ''
	const date = new Date(timeStr.replace(/-/g, '/'))
	return `${date.getMonth() + 1}月${date.getDate()}日 ${date.getHours()}:${date.getMinutes()}`
}

// 获取评论列表
const getComments = async (postId, page = 1) => {
	loading.value = true
	try {
		const res = await api.request({
			url: '/api/post/get_post_comment/',
			method: 'GET',
			data: {
				post_id: postId,
				page: page,
				page_size: PAGE_SIZE
			}
		})
		if(res.code === 200) {
			// 适配新的数据格式
			comments.value = res.data.data
			totalComments.value = res.data.total
			currentPage.value = parseInt(res.data.page)
			// 计算总页数
			totalPages.value = Math.ceil(totalComments.value / parseInt(res.data.page_size))
		}
	} catch(err) {
		console.error('获取评论失败', err)
	} finally {
		loading.value = false
	}
}

// 上一页
const prevPage = () => {
	if(loading.value || currentPage.value <= 1) return
	currentPage.value--
	getComments(postId.value, currentPage.value)
}

// 下一页
const nextPage = () => {
	if(loading.value || currentPage.value >= totalPages.value) return
	currentPage.value++
	getComments(postId.value, currentPage.value)
}

// 前往编辑帖子页面
const goToEditPost = () => {
	uni.navigateTo({
		url: `/pages/post/edit_post?post_id=${postId.value}`
	})
}

// 提交评论
const submitComment = async () => {
	if(!commentContent.value.trim() || loading.value) return
	
	loading.value = true
	try {
		const res = await api.request({
			url: '/api/post/create_post_comment/',
			method: 'POST',
			data: {
				post_id: postId.value,
				content: commentContent.value.trim()
			}
		})
		
		if(res.code === 200) {
			commentContent.value = ''
			currentPage.value = 1
			await getComments(postId.value, 1)
			uni.showToast({
				title: '评论成功',
				icon: 'success'
			})
		}
	} catch(err) {
		console.error('发送评论失败', err)
		uni.showToast({
			title: '评论失败',
			icon: 'error'
		})
	} finally {
		loading.value = false
	}
}

// 处理点赞
const handleLike = async () => {
	if(loading.value) return
	loading.value = true
	
	try {
		const res = await api.request({
			url: post.value.is_liked ? '/api/post/cancel_like_post/' : '/api/post/like_post/',
			method: 'GET',
			data: {
				post_id: postId.value
			}
		})
		
		if(res.code === 200) {
			post.value.is_liked = !post.value.is_liked
			post.value.likes = post.value.is_liked ? post.value.likes + 1 : post.value.likes - 1
			
			uni.showToast({
				title: post.value.is_liked ? '点赞成功' : '取消点赞',
				icon: 'none'
			})
		}
	} catch(err) {
		console.error('点赞操作失败', err)
		uni.showToast({
			title: '操作失败',
			icon: 'none'
		})
	} finally {
		loading.value = false
	}
}

// 添加新的响应式状态
const showMoreActions = ref(false)

// 切换展开菜单
const toggleMoreActions = () => {
	showMoreActions.value = !showMoreActions.value
}

// 处理分享
const handleShare = () => {
	// 关闭菜单
	showMoreActions.value = false
	// 先提示用户正在开发中
	uni.showToast({
		title: '正在开发中',
		icon: 'none'
	})
}

// 修改原有方法,添加关闭菜单
const goToAddMedia = () => {
	showMoreActions.value = false
	uni.navigateTo({
		url: `/pages/post/create_post_media?post_id=${postId.value}`
	})
}

const handleDelete = () => {
	showMoreActions.value = false
	messageBox.value.show()
}

// 获取用户信息
const getUserInfo = () => {
	const info = uni.getStorageSync(Storages.UserInfo.userInfo)
	if(info) {
		userInfo.value = info
	}
}

// 确认删除
const confirmDelete = async () => {
	try {
		const res = await api.request({
			url: '/api/post/delete_post/',
			method: 'GET',
			data: {
				post_id: postId.value,
				user_id: userInfo.value.user_id
			}
		})
		
		if(res.code === 200) {
			uni.showToast({
				title: '删除成功',
				icon: 'success'
			})
			
			setTimeout(() => {
				uni.navigateBack()
			}, 1500)
		} else {
			uni.showToast({
				title: res.message,
				icon: 'none'
			})
		}
	} catch(err) {
		console.error('删除失败', err)
		uni.showToast({
			title: err.message || '删除失败',
			icon: 'none'
		})
	}
}

// 前往编辑帖子顺序页面
const goToEditPostOrder = () => {
	uni.navigateTo({
		url: `/pages/post/edit_post_order?post_id=${postId.value}`
	})
}

// 添加刷新页面方法
const refreshPage = () => {
	// 关闭菜单
	showMoreActions.value = false
	
	// 显示加载提示
	uni.showLoading({
		title: '刷新中...'
	})
	
	// 重新进入页面
	uni.redirectTo({
		url: `/pages/post/detail?post_id=${postId.value}`,
		complete: () => {
			uni.hideLoading()
		}
	})
}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background: #f5f5f5;
	padding: 20rpx;
}

.post-detail {
	background: #fff;
	border-radius: 12rpx;
	padding: 30rpx;
	box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
	
	.user-info {
		display: flex;
		align-items: center;
		margin-bottom: 30rpx;
		
		.avatar {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			margin-right: 20rpx;
		}
		
		.user-meta {
			margin-right: auto;
			
			.username {
				font-size: 32rpx;
				color: #333;
				font-weight: bold;
				display: block;
				margin-bottom: 4rpx;
			}
			
			.time {
				font-size: 24rpx;
				color: #999;
			}
		}
		
		.more-actions {
			position: relative;
			
			.more-btn {
				width: 64rpx;
				height: 64rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-radius: 50%;
				
				&:active {
					background: #f5f5f5;
				}
			}
			
			.action-menu {
				position: absolute;
				top: 80rpx;
				right: 0;
				background: #fff;
				border-radius: 12rpx;
				box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);
				z-index: 100;
				min-width: 240rpx;
				padding: 10rpx 0;
				white-space: nowrap;
				
				&::before {
					content: '';
					position: absolute;
					top: -16rpx;
					right: 20rpx;
					border: 8rpx solid transparent;
					border-bottom-color: #fff;
				}
				
				.menu-item {
					display: flex;
					align-items: center;
					gap: 16rpx;
					padding: 24rpx 32rpx;
					font-size: 28rpx;
					color: #666;
					white-space: nowrap;
					
					&:active {
						background: #f8f8f8;
					}
					
					&.delete {
						color: #ff6b6b;
					}
				}
			}
		}
	}
	
	.content-wrap {
		.title {
			font-size: 36rpx;
			color: #333;
			font-weight: bold;
			margin-bottom: 20rpx;
			display: block;
		}
		
		.content {
			font-size: 28rpx;
			color: #666;
			line-height: 1.6;
			margin-bottom: 20rpx;
			display: block;
		}
		
		.media-list {
			margin: 20rpx 0;
			display: flex;
			flex-direction: column;
			gap: 20rpx;
			
			.media-video {
				width: 100%;
				border-radius: 8rpx;
			}
			
			.image-swiper-container {
				position: relative;
				
				.image-counter {
					position: absolute;
					top: 20rpx;
					right: 20rpx;
					background: rgba(0, 0, 0, 0.5);
					padding: 6rpx 20rpx;
					border-radius: 30rpx;
					z-index: 1;
					
					text {
						color: #fff;
						font-size: 24rpx;
					}
				}
				
				.custom-indicators {
					position: absolute;
					bottom: 20rpx;
					left: 50%;
					transform: translateX(-50%);
					display: flex;
					align-items: center;
					gap: 12rpx;
					padding: 10rpx 20rpx;
					background: rgba(0, 0, 0, 0.3);
					border-radius: 30rpx;
					max-width: 80%;
					overflow: hidden;
					
					.indicator-dot {
						width: 12rpx;
						height: 12rpx;
						border-radius: 50%;
						background: rgba(255, 255, 255, 0.5);
						transition: all 0.3s;
						flex-shrink: 0;
						
						&.active {
							background: #fff;
							transform: scale(1.2);
						}
					}
					
					.indicator-more {
						color: rgba(255, 255, 255, 0.7);
						font-size: 24rpx;
						padding: 0 4rpx;
						line-height: 1;
						flex-shrink: 0;
					}
				}
				
				.image-swiper {
					width: 100%;
					height: 500rpx;
					border-radius: 8rpx;
					overflow: hidden;
					
					.swiper-item {
						display: flex;
						justify-content: center;
						align-items: center;
						background: #f8f8f8;
						
						.media-image {
							width: 100%;
							height: 100%;
							border-radius: 8rpx;
						}
					}
				}
			}
		}
	}
	
	.comment-section {
		margin-top: 30rpx;
		padding-top: 30rpx;
		border-top: 1rpx solid #eee;
		
		.comment-input {
			display: flex;
			align-items: center;
			gap: 20rpx;
			margin-bottom: 30rpx;
			padding-bottom: 20rpx;
			border-bottom: 1rpx solid #eee;
			
			input {
				flex: 1;
				height: 72rpx;
				background: #f8f8f8;
				border-radius: 36rpx;
				padding: 0 30rpx;
				font-size: 28rpx;
				color: #333;
				
				&:disabled {
					opacity: 0.7;
				}
			}
			
			.submit-btn {
				padding: 0 30rpx;
				height: 72rpx;
				line-height: 72rpx;
				background: $uni-color-primary;
				color: #fff;
				font-size: 28rpx;
				border-radius: 36rpx;
				margin: 0;
				
				&:disabled {
					opacity: 0.5;
					background: #ccc;
				}
				
				&:active {
					opacity: 0.8;
				}
			}
		}
		
		.comment-header {
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			
			.title {
				font-size: 32rpx;
				color: #333;
				font-weight: bold;
			}
			
			.count {
				font-size: 24rpx;
				color: #999;
				margin-left: 10rpx;
				font-weight: normal;
			}
		}
		
		.comment-list {
			.comment-item {
				padding: 30rpx 0;
				border-bottom: 1rpx solid #eee;
				
				.comment-user {
					display: flex;
					align-items: center;
					margin-bottom: 16rpx;
					
					.avatar {
						width: 64rpx;
						height: 64rpx;
						border-radius: 50%;
						margin-right: 16rpx;
					}
					
					.user-info {
						flex: 1;
						
						.username {
							font-size: 28rpx;
							color: #333;
							font-weight: bold;
							display: block;
							margin-bottom: 4rpx;
						}
						
						.time {
							font-size: 24rpx;
							color: #999;
						}
					}
				}
				
				.comment-info {
					padding-left: 80rpx;
					
					.content {
						font-size: 28rpx;
						color: #666;
						line-height: 1.6;
					}
				}
				
				&:last-child {
					border-bottom: none;
					padding-bottom: 0;
				}
			}
		}
		
		.no-comment {
			text-align: center;
			padding: 40rpx 0;
			color: #999;
			font-size: 28rpx;
		}
		
		.pagination {
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 30rpx 0;
			gap: 20rpx;
			
			.page-btn {
				padding: 10rpx 30rpx;
				background: #f8f8f8;
				color: #666;
				font-size: 26rpx;
				border-radius: 30rpx;
				min-width: 120rpx;
				text-align: center;
				
				&.disabled {
					opacity: 0.5;
					pointer-events: none;
					background: #f0f0f0;
				}
				
				&:active {
					opacity: 0.7;
				}
			}
			
			.page-info {
				font-size: 26rpx;
				color: #999;
				min-width: 100rpx;
				text-align: center;
			}
		}
	}
	
	.post-footer {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-top: 30rpx;
		padding-top: 30rpx;
		border-top: 1rpx solid #eee;
		
		.category-tag {
			padding: 6rpx 20rpx;
			background: #f8f8f8;
			color: #666;
			font-size: 24rpx;
			border-radius: 24rpx;
		}
		
		.action-btns {
			display: flex;
			align-items: center;
			gap: 20rpx;
		}
		
		.action-item {
			display: flex;
			align-items: center;
			gap: 8rpx;
			font-size: 28rpx;
			color: #999;
			padding: 10rpx 20rpx;
			transition: all 0.3s;
			border-radius: 30rpx;
			
			.icon-icon {
				color: #ff6b6b;
				font-size: 32rpx;
			}
			
			&.active {
				color: #ff6b6b;
				background: rgba(255, 107, 107, 0.1);
			}
			
			&:active {
				transform: scale(0.95);
				opacity: 0.8;
			}
		}
		
		.delete-btn {
			display: flex;
			align-items: center;
			gap: 8rpx;
			font-size: 28rpx;
			color: #ff6b6b;
			padding: 10rpx 20rpx;
			border-radius: 30rpx;
			background: rgba(255, 107, 107, 0.1);
			
			&:active {
				transform: scale(0.95);
				opacity: 0.8;
			}
		}
	}
}

// 添加 loading 样式
.loading-wrapper {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
}

// 添加遮罩层样式
.mask {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.3);
	z-index: 99;
}
</style>
